<!--  Copyright 2020 Zhejiang Lab and Zhejiang University. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =============================================================
-->

<template>
  <div>
    <b-form>
      <b-row>
        <b-col>
          <b-form-group label="任务：" label-cols-sm="2" label-cols-lg="1">
            <b-form-checkbox
              v-for="item in options.tasks"
              :key="item.id"
              :value="item.id"
              v-model="file_info.task"
              button
              button-variant="outline-primary"
              :style="style.checkbox"
            >{{item.name}}</b-form-checkbox>
          </b-form-group>
        </b-col>
      </b-row>

      <b-row>
        <b-col>
          <b-form-group label="名称：" label-cols-sm="3" label-cols-lg="2">
            <b-form-input v-model="file_info.model_name"  type="text" placeholder="请输入模型名称"></b-form-input>
          </b-form-group>
        </b-col>
        <b-col>
          <b-form-group label="公开：" label-cols-sm="3" label-cols-lg="2">
            <b-form-checkbox
              v-model="file_info.is_public"
              :value="true"
              :unchecked-value="false"
              class="pt-2"
            >是</b-form-checkbox>
          </b-form-group>
        </b-col>
      </b-row>

      <b-row>
        <b-col md="6">
          <b-form-group label="数据集：" label-cols-sm="3" label-cols-lg="2">
            <b-form-input v-model="file_info.dataset_name" type="text" placeholder="请输入数据集名称"></b-form-input>
          </b-form-group>
        </b-col>
        
        <b-col md="6"></b-col>
      </b-row>

      <b-button
        block
        @click="updateModel({file_info:file_info, model_id:$route.params.model_id})"
        variant="primary"
        :style="style.submitBtn"
      >更新</b-button>
    </b-form>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { closeDialog } from "../store/utils";

export default {
  name: "UpdateModel",
  data: function() {
    return {
      file: null,
      file_info: {
        model_name: this.$route.params.model_name,
        task: this.$route.params.task,
        dataset_name: this.$route.params.dataset_name,
        backbone: this.$route.params.backbone,
        is_public: this.$route.params.is_public=='true',
      },
      style: {
        title: {
          fontSize: "20px"
        },
        submitBtn: {
          marginTop: "20px"
        },
        checkbox: {
          marginLeft: "0px",
          marginRight: "10px",
          marginTop: "5px",
          marginBottom: "5px"
        }
      }
    };
  },
  computed: mapState("model", {
    errors: state => state.errors,
    options: state => state.options,
    is_dialog_open: state => state.is_dialog_open,
    dialog_content: state => state.dialog_content
  }),
  methods: {
    ...mapMutations("model", [
      "setErrors",
      "setUploadOptions",
      "setIsDialogOpen",
      "setDialogContent"
    ]),
    ...mapActions("model", ["updateModel", "getUploadOptions"]),
    closeDialog
  },
  mounted() {
     this.$store.dispatch("model/getUploadOptions");
  }
};
</script>